<template>
  <div>
    <navy>
      <div slot="main">
        <a-row type="flex" justify="space-around" align="middle">
          <a-col :span="11" id="row">
            <p class="height-600">
              <a-carousel autoplay>
                <a slot="customPaging" slot-scope="props">
                  <img :src="getImgUrl(props.i)" style="width:80px;height:80px"/>
                </a>
                <div v-for="item in imgindex" :key="item.articleId">
                  <router-link :to="{name:'view',query:{articleId:item.articleId}}">
                    <img :src="item.imgUrl" id="coverimg" :title="item.articleTitle+' '+item.createTime"/>
                  </router-link>
                </div>
              </a-carousel>
            </p>
          </a-col>
          <a-col :span="11" id="col" style="height:600px">
            <template>
              <a-list
                itemLayout="vertical"
                size="large"
                :dataSource="listDataWithoutCover"
              >
                <a-list-item slot="renderItem" slot-scope="item">
                  <router-link :to="{name:'view',query:{articleId:item.articleId}}" style="color:black">
                    <a-row type="flex" justify="space-around" align="middle">
                      <a-col :span="24" style="height:100px">
                        <a-row type="flex" justify="space-around" align="middle">
                          <a-col :span="17" style="height:200px">
                            <h1 style="font-weight:bold">{{ item.articleTitle }}</h1>
                            <div v-html="item.content" style="font-size:large"></div>
                            <span style="font-size:large">发表日期：{{ item.createTime }}</span>
                          </a-col>
                          <a-col :span="7" style="height:200px">
                            <a-row type="flex" justify="space-around" align="middle">
                              <a-col :span="24" style="height:60px"></a-col>
                            </a-row>
                            <a-row type="flex" justify="space-around" align="middle">
                              <a-col :span="24" style="height:100px">
                                <span style="font-size:large">{{ item.articleTag }}</span>
                              </a-col>
                            </a-row>
                          </a-col>
                        </a-row>
                      </a-col>
                    </a-row>
                  </router-link>
                </a-list-item>
              </a-list>
            </template>
          </a-col>
        </a-row>
        <a-row type="flex" justify="space-around" align="middle">
          <a-col :span="24">
            <router-link to="/view">
              <template>
                <a-list
                  itemLayout="vertical"
                  size="large"
                  :dataSource="listDataWithCover"
                >
                  <a-list-item slot="renderItem" slot-scope="item">
                    <router-link :to="{name:'view',query:{articleId:item.articleId}}" style="color:black">
                      <a-row type="flex" justify="space-around" align="middle">
                        <a-col :span="1"></a-col>
                        <a-col :span="23" style="height:320px">
                          <a-col :span="6">
                            <img :src="item.imgUrl" style="width:320px;height:320px">
                          </a-col>
                          <a-col :span="18" style="height:320px">
                            <a-row type="flex" justify="space-around" align="middle">
                              <a-col :span="24" style="height:50px"></a-col>
                            </a-row>
                            <a-row type="flex" justify="space-around" align="middle">
                              <a-col :span="1"></a-col>
                              <a-col :span="15" style="height:200px">
                                <h1 style="font-weight:bold">{{ item.articleTitle }}</h1><br>
                                <div v-html="item.content" style="font-size:x-large;"></div>
                              </a-col>
                              <a-col :span="7"></a-col>
                            </a-row>
                            <a-row type="flex" justify="space-around" align="middle">
                              <a-col :span="2"></a-col>
                              <a-col :span="22" style="font-size:large"><span>发表日期：{{ item.createTime }}</span>
                              </a-col>
                            </a-row>
                          </a-col>
                        </a-col>
                      </a-row>
                    </router-link>
                  </a-list-item>
                </a-list>
              </template>
            </router-link>
          </a-col>
        </a-row>
      </div>
    </navy>
  </div>
</template>

<script>
import Navy from './nav'
export default {
  name: 'Index',
  components: {
    Navy
  },
  data () {
    return {
      listDataWithCover: [],
      listDataWithoutCover: [],
      imgUrl: '',
      articleId: '',
      articleTitle: '',
      createTime: '',
      content: '',
      imgindex: []
    }
  },
  created () {
    this.axios.get('/api/findAllArticle').then((res) => {
      if (res.status) {
        var datalist = JSON.parse(res.data)
        const arr1 = []
        const arr2 = []
        var imageindex = []
        var count = 0
        for (let i = 0; i < datalist.length; i++) {
          if (datalist[i].imgUrl !== undefined) {
            count = count + 1
            if (count <= 3) {
              imageindex.push(datalist[i])
            }
            if (imageindex.length === 3) {
              this.imgindex = imageindex
            }
            this.$set(datalist[i], 'content', '')
            this.articleId = datalist[i].articleId
            this.axios.get('/api/getArticleContent', {
              params: {
                articleId: this.articleId
              }
            }).then((res) => {
              var cover = res.data
              for (let i = 0; i < cover.length; i++) {
                if (i === 25) {
                  self.content = cover.substr(0, i + 1) + '...</p>'
                  break
                }
              }
              datalist[i].content = self.content
              arr1.push(datalist[i])
              if (arr1.length > 3) {
                arr1.splice(3, 1)
              }
            })
          } else if (datalist[i].imgUrl === undefined) {
            this.$set(datalist[i], 'content', '')
            this.articleId = datalist[i].articleId
            this.axios.get('/api/getArticleContent', {
              params: {
                articleId: this.articleId
              }
            }).then(function (response) {
              var nocover = response.data
              for (let i = 0; i < nocover.length; i++) {
                if (i === 25) {
                  self.content = nocover.substr(0, i + 1) + '...</p>'
                  break
                }
              }
              datalist[i].content = self.content
              arr2.push(datalist[i])
              if (arr2.length > 4) {
                arr2.splice(4, 1)
              }
            })
          }
        }
        this.listDataWithCover = arr1
        this.listDataWithoutCover = arr2
      }
    })
  },
  methods: {
    getImgUrl (i) {
      return this.imgindex[i].imgUrl
    }
  }
}
</script>

<style>
#row{
    padding: 80px 10px;
}
.height-600{
  height: 600px;
  margin: auto;
  position: relative;
  top: 0px;
}
#coverimg{
  width: 650px;
  height: 530px;
}
</style>
